<template>
	<view class="index-p">
		<view class="default-title"> switch-开关 </view>
		<view class="padding30-lr">
			<m-switch v-model="switchVal"></m-switch>
		</view>


		<view class="default-title"> loadmore-加载更多 </view>
		<m-loadmore loading></m-loadmore>
		<m-loadmore></m-loadmore>

		<view class="default-title"> image-图片 </view>
		<view class="padding30-lr flex-space-between">
			<m-image preview
				src="http://cdn-ali-img-staticbz.shanhutech.cn/bizhi/staticwp/201711/e2fdd69e2fb6facee2cdabefceb7c13b.jpg">
			</m-image>
			<m-image preview
				src="http://cdn-ali-img-shstaticbz.shanhutech.cn/bizhi/staticwp/202105/7d5bf46cd468a1192bf2b51a99fb7a3c--1041061742.jpg">
			</m-image>
			<m-image src=""></m-image>
		</view>

		<view class="default-title"> button-按钮 </view>
		<view class="padding30">
			<m-button fontWeight="bold">按 钮</m-button>
		</view>
		<view class="padding30">
			<m-button themeColor="#4db6ac" loading shape="circle">按 钮</m-button>
		</view>
		<view class="padding30">
			<m-button plain shape="circle" width="40%" height="70rpx" fontSize="28rpx">按 钮</m-button>
		</view>
		<view class="padding30">
			<m-button plain disabled loading themeColor="#1e90ff">按 钮</m-button>
		</view>

		<view class="default-title"> upload-图片上传 </view>
		<view class="padding30-lr">
			<m-upload :src="src" @uploaded="uploaded" @del="src = ''" tips="上传图片"></m-upload>
		</view>

		<view class="default-title"> upload-list-图片上传列表展示 </view>
		<view class="padding30-lr">
			<m-upload-list v-model="urls" size="152rpx"></m-upload-list>
		</view>

		<view class="default-title"> cell-单元格 </view>
		<view class="padding30-lr">
			<m-cell :cells="cells">
				<m-cell-item v-for="(item, index) in cells" :option="item" :key="index" @click="handleClickCell">
				</m-cell-item>
				<m-cell-item :option="{ iconSlot: true, label: '自定义icon-slot' }" @click="handleClickCell">
					<view class="cell-icon-slot" slot="icon"></view>
				</m-cell-item>
			</m-cell>
		</view>

		<view class="default-title"> form-表单 </view>
		<view class="padding30-lr">
			<m-form ref="mForm" :option="option" v-model="form"></m-form>
			<view class="" style="height: 30rpx"></view>
			<m-button fontWeight="bold" @click="handleSubmit">提 交</m-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			const imgUrls = [
				"https://tea-public-read.oss-cn-zhangjiakou.aliyuncs.com/2021/06/23/70ef1f5fdfb1473bba1116103c44b9a1.png",
				"https://tea-public-read.oss-cn-zhangjiakou.aliyuncs.com/2021/06/23/87e988f1556f47619c2b086b726754cb.png",
				"https://tea-public-read.oss-cn-zhangjiakou.aliyuncs.com/2021/06/23/b3627dff10d84d09a6d45062028003ba.png",
				"https://tea-public-read.oss-cn-zhangjiakou.aliyuncs.com/2021/06/23/d46d061a5ed2466994cbbcebb26a3859.png",
				"https://tea-public-read.oss-cn-zhangjiakou.aliyuncs.com/2021/06/23/33b66075b2fe4479a4cd75e8e743751d.png",
			];
			return {
				switchVal: 1,
				cells: [{
						label: "个人中心",
						pageUrl: "/pages/index/abc",
					},
					{
						label: "客服电话",
						value: "15020394428",
						arrow: false,
						iconCode: "&#xe644;",
					},
					{
						label: "自定义icon-iconfont",
						value: "---",
						arrow: false,
						iconfontClass: "m-iconfont-6",
						iconCode: "&#xe607;",
					},
				],
				src: "",
				urls: imgUrls,
				form: {
					name: "孙尚香",
					age: 23,
					birth: "1998-04-06",
					sex: 2,
					address: "王者峡谷王者峡谷王者峡谷王者峡谷王者峡谷王者峡谷王者峡谷王者峡谷王者峡谷王者峡谷王者峡谷",
					poster: imgUrls,
				},
				option: {
					column: [{
							label: "英雄姓名",
							prop: "name",
							required: true,
						},
						{
							label: "英雄海报",
							prop: "poster",
							type: "upload",
						},
						{
							label: "年龄",
							prop: "age",
							placeholder: "输入你的周岁",
							type: "number",
						},
						{
							label: "性别",
							prop: "sex",
							type: "select",
							required: true,
							dicData: [{
									label: "未知",
									value: 0,
								},
								{
									label: "男",
									value: 1,
								},
								{
									label: "女",
									value: 2,
								},
							],
						},
						{
							label: "出生日期",
							prop: "birth",
							type: "date",
							required: true,
						},
						{
							label: "年份",
							prop: "year",
							type: "year",
							end: "2020",
							required: true,
						},
						{
							label: "哪年几月",
							prop: "month",
							type: "month",
							required: true,
						},
						{
							label: "时间",
							prop: "time",
							type: "time",
							required: true,
						},
						{
							label: "地区",
							prop: "area",
							type: "select",
							required: true,
							dicData: [{
									labellabel: "鲁南",
									valuevalue: 111,
								},
								{
									labellabel: "鲁中",
									valuevalue: 222,
								},
								{
									labellabel: "鲁西",
									valuevalue: 333,
								},
							],
							props: {
								label: "labellabel",
								value: "valuevalue",
							},
						},
						{
							label: "地址",
							prop: "address",
							type: "map",
						},
						{
							label: "简介",
							prop: "disc",
							type: "textarea",
						},
						{
							label: "设为默认",
							prop: "isDefault",
							type: "switch",
						},
					],
				},
			};
		},
		onLoad() {},
		methods: {
			handleClickCell(item) {
				console.log(item);
			},
			uploaded([url], beforeUrl) {
				this.src = url;
			},
			handleSubmit() {
				this.$refs.mForm.validate((valid) => {
					console.log(valid);
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	@import "~@/assets/scss/mixin.scss";

	.index-p {
		padding-bottom: 30rpx;

		.theme-color {
			background-color: $uni-color-primary;
			width: 690rpx;
			padding: 60rpx 0;
			border-radius: 10rpx;
			color: #fff;
		}

		.cell-icon-slot {
			width: 34rpx;
			height: 34rpx;
			background-image: url(../../assets/imgs/cell-icon.png);
			@include bgSettings();
		}
	}
</style>
